<template>
  <div id="app">
    <van-nav-bar
      :title="title"
      :left-text="isBack ? '返回' : ''"
      :left-arrow="isBack"
      @click-left="back"
    >
      <i
        v-if="isAdd"
        class="iconfont icon-xinzeng"
        slot="right"
      ></i>
      <span
        slot="right"
        class="control"
        v-else-if="isEdit"
        @click="$router.push('/edit')"
      >编辑</span>
      <span
        slot="right"
        @click="complete"
        class="control"
        v-else-if="isComplete"
      >
        完成
      </span>
    </van-nav-bar>
    <router-view ref="router"></router-view>
    <van-tabbar
      v-if="isTabbar"
      v-model="tabbarActive"
    >
      <van-tabbar-item
        to="/home"
        icon=" iconfont icon-lately"
      >最近</van-tabbar-item>
      <!-- classify -->
      <van-tabbar-item icon=" iconfont icon-classify">分类</van-tabbar-item>
      <!-- me -->
      <van-tabbar-item icon="friends-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      routerMapIdxs: {
        home: 0,
        classify: 1,
        me: 2
      }
    };
  },
  computed: {
    tabbarActive() {
      const keys = Object.keys(this.routerMapIdxs);
      const idx = keys.indexOf(this.$route.name);

      if (idx >= 0) {
        return this.routerMapIdxs[keys[idx]];
      }

      return -1;
    },
    title() {
      return this.$route.meta.title || this.$store.state.title;
    },
    isBack() {
      return this.$route.meta.back;
    },
    isAdd() {
      return this.$route.meta.add;
    },
    isTabbar() {
      return this.$route.meta.tabbar;
    },
    isEdit() {
      return this.$route.meta.edit;
    },
    isComplete() {
      return this.$route.meta.complete;
    }
  },
  methods: {
    complete() {
      const complete = this.$refs.router.complete;

      if (complete) {
        complete();
      }

      this.$router.go(-1);
    },
    back() {
      const back = this.$refs.router.back;

      if (back) {
        back();
      }

      this.$router.go(-1);
    }
  }
};
</script>
